<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui"/>
    <title>Mojito</title>
    <script src="../js/base.js"></script>
    <link rel="stylesheet" href="../plugins/vant/vant.min.css">
    <link rel="stylesheet" href="../styles/common.css"/>
    <link rel="stylesheet" href="../styles/address.css"/>
</head>
<body>
  <div id="address" class="app">
    <div class="divHead">
      <div class="divTitle">
        <i @click="goBack"><van-icon name="arrow-left" /></i>我的收货地址
      </div>
    </div>
    <div class="divContent">
      <div class="divItem" v-for="(item,index) in addressList" :key="index" @click="checkAddress(item)">
        <div class="divAddress">
          <span v-if="item.tag" :class="['tag',item.tag]">{{item.tag}}</span>
          <span class="detail">{{item.detail}}</span>
        </div>
        <div class="divInfo">
          <span>{{item.consignee}}</span>
          <span>{{item.sex === 0 ? '女士' : '先生'}}</span>
          <span>{{item.phone}}</span>
        </div>
        <img src="../images/edit.png" @click.stop.prevent="toAddressEditPage(item)"/>
        <div class="divSplit"></div>
        <div class="divDefault" @click.stop.prevent="changeDefault(item)">
          <van-checkbox :value="item.isDefault" icon-size="14rem">默认地址</van-checkbox>
        </div>
      </div>
    </div>
    <div class="divBottom">
      <van-button class="btnAdd" @click="toAddressCreatePage">+ 新增收获地址</van-button>
    </div>
  </div>
  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  <script src="../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../plugins/vant/vant.min.js"></script>
  <!-- 引入axios -->
  <script src="../plugins/axios/axios.min.js"></script>
  <script src="../js/request.js"></script>
  <script src="../api/address.js"></script>
  <script>
    new Vue({
      el: "#address",
      data() {
        return {
          addressList: []
        }
      },
      created() {
        this.initData()
      },
      methods: {
        initData() {
          getAddressListApi().then(res => {
            this.addressList = res.data
          }).catch(error => {
            this.$toast(error.message)
          })
        },

        // 选中地址
        checkAddress(item) {
          const url = document.referrer
          if (url.includes('page/add-order.html')) {
            // 表示是从提交订单页面跳转过来的
            sessionStorage.setItem('orderAddress', JSON.stringify(item))
            this.goBack()
          }
        },

        // 改变默认状态
        changeDefault(item) {
          const params = {
            id: item.id,
            isDefault: !item.isDefault
          }
          editAddressApi(params).then(res => {
            // 如果是设置为默认地址，需要先将之前的默认地址改为非默认地址
            if (params.isDefault) {
              for (const address of this.addressList) {
                if (address.isDefault) {
                  address.isDefault = false
                  break
                }
              }
            }
            item.isDefault = params.isDefault
          }).catch(error => {
            this.$toast(error.message)
          })
        },

        toAddressEditPage(item) {
          window.requestAnimationFrame(() => {
            window.location.href = `/front/page/address-edit.html?id=${item.id}`
          })
        },
        toAddressCreatePage() {
          window.requestAnimationFrame(() => {
            window.location.href = '/front/page/address-edit.html'
          })
        },
        goBack() {
          window.requestAnimationFrame(() => {
            history.back()
          })
        }
      }
    })
  </script>
</body>
</html>